<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title><spring:message code="personal"></spring:message></title>
    <link href="${pageContext.request.contextPath }/phone/css/font/iconfont.css" rel="stylesheet" type="text/css" />
    <!--公共样式-->
    <link href="${pageContext.request.contextPath }/phone/css/public.css" rel="stylesheet" type="text/css" />
    <!--layer弹出-->
    <link href="${pageContext.request.contextPath }/phone/js/layer/skin/layer.css" rel="stylesheet" type="text/css" />
    <!--我的(个人中心)样式-->
    <link href="${pageContext.request.contextPath }/phone/css/mine.css" rel="stylesheet" type="text/css" />
    <!--上传图片-->
    <link rel='stylesheet' href='${pageContext.request.contextPath }/phone/css/layout.css' />
    <link href="${pageContext.request.contextPath }/phone/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/phone/css/cropper.css?v=1" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/phone/css/uploadImg.css" rel="stylesheet">
</head>
<body>
<!--头部 begin-->
<header class="page_topbar">
    <a href="javascript:userCenter();" class="back Hui-iconfont"></a>
    <a href="javascript:submit();" class="home"><spring:message code="member.info.save"></spring:message></a>
    <div class="title"><spring:message code="personal"></spring:message></div>
</header>
<!--头部 end-->
<div class="content mb-80">
	<form id="memForm" enctype="multipart/form-data" action="javascript:void(0)">
	<input type="hidden" id="mId" name="mId" value="${member.mId}" />
	<input type="hidden" id="mImg" name="mImg" value="${member.mImg}" />
	<input type="hidden" id="mProvince" name="mProvince" value="${mProvince}" />
	<input type="hidden" id="mCity" name="mCity" value="${mCity}" />
	<input type="hidden" id="mArea" name="mArea" value="${mArea}" />
    <ul class="minelist pt-10">
        <li class="mb-10 avatar-editor-btn">
        	<div class="minelistleft2"><spring:message code="portrait"></spring:message>：</div>
        	<i class="Hui-iconfont">
        		<img id="headImg" src="${pageContext.request.contextPath }/upload/${member.mImg }">&#xe63d;
       		</i>
       		<div class="clearf" style="clear:both;"></div>
   		</li>
        <li class="bt-1">
        	<div class="minelistleft2"><spring:message code="member.name"></spring:message>：</div>
        	<input class="minelistinput" type="text" id="mNickname" name="mNickname" value="${member.mNickname }" maxlength="6" />
        	<div class="clearf"></div>
       	</li>
        <li>
        	<div class="minelistleft2"><spring:message code="member.contact"></spring:message>：</div>
        	<input class="minelistinput" type="text" id="mFixedTelephone" name="mFixedTelephone" value="${member.mFixedTelephone }" />
        	<div class="clearf"></div>
       	</li>
        <li>
        	<div class="minelistleft2"><spring:message code="member.phone"></spring:message>：</div>
        	<span class="minelistinput">${member.mPhone }</span>
        	<div class="clearf"></div>
       	</li>
        <li>
        	<div class="minelistleft2"><spring:message code="member.email"></spring:message>：</div>
        	<input class="minelistinput" type="text" id="mEmail" name="mEmail" value="${member.mEmail }" />
        	<div class="clearf"></div>
       	</li>
        <li class="location-btn">
        	<div class="minelistleft2"><spring:message code="member.address"></spring:message>：</div>
        	<input class="minelistinput" type="text" id="mAddress" name="mAddress" value='<c:if test="${not empty member.mProvince }">${member.mProvince }</c:if><c:if test="${not empty member.mCity }">·${member.mCity }</c:if><c:if test="${not empty member.mArea }">·${member.mArea }</c:if>'/>
        	<div class="clearf"></div>
       	</li>
    </ul>
   </form>
</div>

<div class="conceal"></div>
<!--修改所在地提示信息-->
<div class="messagemox location">
    <div class="headli">
        <i class="Hui-iconfont">&#xe6a6;</i>
		<spring:message code="member.info.selectAdd"></spring:message>
    </div>
    <div class="content">
        <select name="province" id="province" onchange="selectChanged();">
       		<option value="">请选择</option>
	        <c:forEach items="${domainList }" var="d">
	        	<c:if test="${d.dParentid==0 }">
	        		<option value="${d.dCode }" <c:if test="${member.mProvince==d.dName }">selected="selected"</c:if>>${d.dName }</option>
	        	</c:if>
	        </c:forEach>
        </select>
        <select name="city" id="city" onchange="selectArea();">
        	<c:if test="${not empty mProvince }">
	        	<c:forEach items="${domainList }" var="d">
		        	<c:if test="${d.dParentid==mProvince }">
		        		<option value="${d.dCode }" <c:if test="${member.mCity==d.dName }">selected="selected"</c:if>>${d.dName }</option>
		        	</c:if>
		        </c:forEach>
        	</c:if>
        </select>
        <select name="area" id="area" style="margin-left:1.5%;">
        	<c:if test="${not empty mCity }">
        		<c:forEach items="${domainList }" var="d">
		        	<c:if test="${d.dParentid==mCity }">
		        		<option value="${d.dCode }" <c:if test="${member.mArea==d.dName }">selected="selected"</c:if>>${d.dName }</option>
		        	</c:if>
		        </c:forEach>
        	</c:if>
        </select>
        <br>
    </div>
    <div class="bottom">
        <input type="button" onclick="updateAddress();" value="<spring:message code="reciveAddress.confirm"></spring:message>" class="btnn addressok">
        <input type="button" value="<spring:message code="reciveAddress.cancel"></spring:message>" class="btnn noOk">
    </div>
</div>
<!--修改头像弹出-->
<div class="messagemox top-up-up">
    <div class="headli">
        <i class="Hui-iconfont nook">&#xe6a6;</i>
        <spring:message code="member.info.upImg"></spring:message>
    </div>
    <div class="content">
        <div class="modal-body row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding:0px;">
                <div class="img-container">
                    <img  id="mImgPic" src="${pageContext.request.contextPath }/upload/${member.mImg }" alt="Picture">
                    <div class="img-type" style="display:none"></div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="uploadimgbtngroup" style="display:table; margin:0 auto;">
                <button data-method="zoom" data-option="0.1" type="button" title="Zoom In">
					<span data-toggle="tooltip">
						<span class="icon icon-zoom-in color1e1e1e"></span>
					</span>
                </button>
                <button data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
					<span data-toggle="tooltip">
						<span class="icon icon-zoom-out"></span>
					</span>
                </button>
                <button data-method="rotate" data-option="-90" type="button" title="Rotate Left">
					<span data-toggle="tooltip">
						<span class="icon icon-rotate-left"></span>
					</span>
                </button>
                <button data-method="rotate" data-option="90" type="button" title="Rotate Right">
					<span data-toggle="tooltip">
						<span class="icon icon-rotate-right"></span>
					</span>
                </button>
                <button data-method="reset" type="button" title="Reset">
					<span data-toggle="tooltip">
						<span class="icon icon-refresh"></span>
					</span>
                </button>
            </div>
            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
                        </div>
                        <div class="modal-body"></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="bottom">
        <p style="text-align:center;font-size:12px;line-height:20px;"><spring:message code="member.info.picInfo"></spring:message></p>
        <label class="btn-upload btn_sty2" style="font-weight:normal; cursor:pointer;" for="inputImage" title="Upload image file">
            <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
			<span class="docs-tooltip" data-toggle="tooltip">
				<span><spring:message code="member.info.selectPic"></spring:message></span>
			</span>
        </label>
        <button class="btn_sty1" data-method="getCroppedCanvas" type="button">
		<span class="docs-tooltip" data-toggle="tooltip" style="color:#fff;">
			<spring:message code="member.info.save"></spring:message>
		</span>
        </button>
    </div>
</div>
<script src="${pageContext.request.contextPath }/phone/js/jquery-1.8.3.min.js"></script>
<!--提示信息-->
<%-- <script src="${pageContext.request.contextPath }/phone/js/layer/layer.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/layer_mobile/layer.js"></script>
<!-- 弹出框 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/window.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/web/js/jquery-form.js"></script>
<!--上传图片-->
<script src="${pageContext.request.contextPath }/phone/js/cropper.js"></script>
<%-- <script src="${pageContext.request.contextPath }/phone/js/main.js"></script> --%>
<!-- 修改所在地选择地区 -->
<%-- <script language="javascript" src="${pageContext.request.contextPath }/phone/js/PCASClass.js"></script> --%>
<!-- 选择所在地 -->
<script language="javascript">
    /* new PCAS("province", "city", "area"); */
    $(function () {
    	$(".upload-img a").click(function(){
    		var imgtype=$(this).parent().attr("title");
    		$(".img-type").text(""+imgtype+"");
    	});
    	'use strict';
    	var console = window.console || { log: function () {} },
    		$alert = $('.docs-alert'),
    		$message = $alert.find('.message'),
    		showMessage = function (message, type) {
    			$message.text(message);
    			if (type) {
    				$message.addClass(type);
    			}
    			$alert.fadeIn();
    			setTimeout(function () {
    				$alert.fadeOut();
    			}, 3000);
    		};
    	// Demo
    	// -------------------------------------------------------------------------
    	(function () {
    		var $image = $('.img-container > img'),
            $dataX = $('#dataX'),
            $dataY = $('#dataY'),
            $dataHeight = $('#dataHeight'),
            $dataWidth = $('#dataWidth'),
            $dataRotate = $('#dataRotate'),
            options = {
    			minContainerWidth:$(".modal-dialog").css("width"),
    			minContainerHeight: $(".img-container").css("min-height"),
    			aspectRatio: 1 / 1,
    			preview: '.img-preview',
    			crop: function (data) {
    				// console.log(data);
    				$dataX.val(Math.round(data.x));
    				$dataY.val(Math.round(data.y));
    				$dataHeight.val(Math.round(data.height));
    				$dataWidth.val(Math.round(data.width));
    				$dataRotate.val(Math.round(data.rotate));
    			}
            };
    		//$image.cropper('setAspectRatio', 'NaN');
    		$image.on({
    			'build.cropper': function (e) {
    				// console.log(e.type);
    			},
    			'built.cropper': function (e) {
    				// console.log(e.type);
    			},
    			'dragstart.cropper': function (e) {
    				// console.log(e.type, e.dragType);
    			},
    			'dragmove.cropper': function (e) {
    				// console.log(e.type, e.dragType);
    			},
    			'dragend.cropper': function (e) {
    				// console.log(e.type, e.dragType);
    			},
    			'zoomin.cropper': function (e) {
    				// console.log(e.type);
    			},
    			'zoomout.cropper': function (e) {
    				// console.log(e.type);
    			}
    		}).cropper(options);
        	// Methods
    		$(document.body).on('click', '[data-method]', function () {
    			var data = $(this).data(),
    			$target,
    			result;
    			if (data.method) {
    				data = $.extend({}, data); // Clone a new one
    				if (typeof data.target !== 'undefined') {
    					$target = $(data.target);
    					if (typeof data.option === 'undefined') {
    						try {
    							data.option = JSON.parse($target.val());
    						} 
    						catch (e) {
    							// console.log(e.message);
    						}
    					}
    				}
    				result = $image.cropper(data.method, data.option);
    				
    				 /* $("#i1").attr("src",result.toDataURL());
    				var _canvas=document.getElementById('c1');
    		        var _context=_canvas.getContext('2d');
    		        var _image = document.getElementById('i1');		        
    		        setTimeout(function () {
    		        	_canvas.width = 300;
    			        _canvas.height = 300;
    			        _context.drawImage(_image,0,0,300,300);
   			        var pic = _canvas.toDataURL().substring(_canvas.toDataURL().indexOf(",")+1);  */
    				result = result.toDataURL().substring(22);
    				$.ajax({
    					url: '${pageContext.request.contextPath }/upload/base64IOstream',
    					type:'post',
    					data: { pic: result},
    					success:function(result){
    						var status=result.msg.status;
    						if(status==0){
    							//返回的剪切头像地址
    							var desc=result.msg.desc;
    							//--------------------------------------------------------------------------------------
    							var path = "${pageContext.request.contextPath }/upload/"+desc;
    							$("#headImg").attr('src',path); 
    							$("#mImg").val(desc); 
    							
    							//----------------------------------------------------------------------------------
    							
    							layer.open({
    								  content: '<spring:message code="phone.member.success"></spring:message>'
    								  ,time: 2
   								});
    							
    							$(".Hui-iconfont.nook").trigger("click");
    						}else if(status==1){
    							layer.open({
    								  content: '<spring:message code="phone.member.failure"></spring:message>'
    								  ,time: 2
   								});
    						}
    					},
    					error:function(){
    						layer.open({
							  content: '<spring:message code="phone.member.failure"></spring:message>'
							  ,time: 2
							});
    					}
    				})
    				//console.log(result);
    				if ($.isPlainObject(result) && $target) {
    					try {
    						$target.val(JSON.stringify(result));
    					} 
    					catch (e) {
    						// console.log(e.message);
    					}
    				}
    			}
    		}).on('keydown', function (e) {
    			switch (e.which) {
    				case 37:
    					e.preventDefault();
    					$image.cropper('move', -1, 0);
    					break;
    				case 38:
    					e.preventDefault();
    					$image.cropper('move', 0, -1);
    					break;
    				case 39:
    					e.preventDefault();
    					$image.cropper('move', 1, 0);
    					break;
    				case 40:
    					e.preventDefault();
    					$image.cropper('move', 0, 1);
    					break;
    			}
    		});
    		// Import image
    		var $inputImage = $('#inputImage'),
    			URL = window.URL || window.webkitURL,
    			blobURL;
    		if (URL) {
    			$inputImage.change(function () {
    				var files = this.files,file;
    				if (files && files.length) {
    					file = files[0];
    					if (/^image\/\w+$/.test(file.type)) {
    						blobURL = URL.createObjectURL(file);
    						$image.one('built.cropper', function () {
    							URL.revokeObjectURL(blobURL); // Revoke when load complete
    						}).cropper('reset', true).cropper('replace', blobURL);
    						$inputImage.val('');
    					} 
    					else {
    						showMessage('Please choose an image file.');
    					}
    				}
    			});
    		} 
    		else {
    			$inputImage.parent().remove();
    		}
    		// Options
    		$('.docs-options :checkbox').on('change', function () {
    			var $this = $(this);
    			options[$this.val()] = $this.prop('checked');
    			$image.cropper('destroy').cropper(options);
    		});
    		// Tooltips
    		//$('[data-toggle="tooltip"]').tooltip();
    	}());
    });
    
    function submit(){
    	var email=$("#mEmail").val(); 
     	reg=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
     	if(email != ''){          	
	     	if(!reg.test(email)){
	      		layer.open({
				    content: '<spring:message code="member.fileEmailValid"></spring:message>'
				    ,time: 1 //1秒后自动关闭
				  });
	      		return false;
	      	}
     	}
    	$('#memForm').ajaxSubmit({
    		type:"POST",
    		url:"${pageContext.request.contextPath }/api/member/save",
    		success:function(data){
    			if(data.msg.status==1){
    				layer.open({
    				    content: '<spring:message code="member.sucUpdate"></spring:message>'
    				    ,time: 1 //1秒后自动关闭
    				  });
    			}else{
    				layer.open({
    				    content: '<spring:message code="member.failUpdate"></spring:message>'
    				    ,time: 1 //1秒后自动关闭
    				  });
    			}
    		}
    	});
    }
  //根据省市查询区县
    function selectChanged(){
    	var pId=$("#province").val();
    	var pName=$("#province option:selected").text();
		if(pId==null||pId==""){
			return false;
		}
		$.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/api/member/getChildArea",
            data: {'pId':pId},
            dataType: "json",
            success: function(data){
           	 var data = eval(data);
           	 //根据id查找对象，
           	 $("#city option").each(function(){
           		$(this).remove();
           	 });
           	$("#area option").each(function(){
           		$(this).remove();
           	 });
                $("#city").append("<option value=''>请选择</option>");
               	for(var i=0;i<data.length;i++){
               		$("#city").append("<option value="+data[i].dCode+">"+data[i].dName+"</option>");
               	}
            } 
        });
    }
  //根据省市查询区县
    function selectArea(){
    	var pId=$("#city").val();
    	var pName=$("#city option:selected").text();
		if(pId==null||pId==""){
			return false;
		}
		$.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/api/member/getChildArea",
            data: {'pId':pId},
            dataType: "json",
            success: function(data){
           	 var data = eval(data);
           	 //根据id查找对象，
           	 $("#area option").each(function(){
           		$(this).remove();
           	 });
                $("#area").append("<option value=''>请选择</option>");
               	for(var i=0;i<data.length;i++){
               		$("#area").append("<option value="+data[i].dCode+">"+data[i].dName+"</option>");
               	}
            } 
        });
    }
  //修改地区
  function updateAddress(){
	  var pId=$("#province").val();
  	  var pName=$("#province option:selected").text();
  	  var cId=$("#city").val();
	  var cName=$("#city option:selected").text();
	  var aId=$("#area").val();
	  var aName=$("#area option:selected").text();
	  if(pId==null||pId==""){
		  layer.open({
			    content: '<spring:message code="phone.member.proviceError"></spring:message>'
			    ,time: 1 //1秒后自动关闭
			  });
		  return false;
	  }
	  if(cId==null||cId==""){
		  layer.open({
			    content: '<spring:message code="phone.member.cityError"></spring:message>'
			    ,time: 1 //1秒后自动关闭
			  });
		  return false;
	  }
	  if(aId==null||aId==""){
		  layer.open({
			    content: '<spring:message code="phone.member.areaError"></spring:message>'
			    ,time: 1 //1秒后自动关闭
			  });
		  return false;
	  }
	  $("#mAddress").val(pName+"·"+cName+"·"+aName);
	  $("#mProvince").val(pId);
	  $("#mCity").val(cId);
	  $("#mArea").val(aId);
	  $(".messagemox").css("display", "none");
      $(".conceal").hide();
  }
  function userCenter(){
	  window.location.href='${pageContext.request.contextPath }/api/member/userCenter';
  }
</script>
</body>

</html>